// 面包屑
.header-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  .handle-box {
    display: flex;
    .handle-btn {
      margin-left: 5px;
    }
  }
}

// card
.ant-card {
  margin-bottom: 16px;
  // 卡片标题
  .ant-card-head {
    padding: 0 30px;
    .ant-card-head-title {
      font-weight: bold;
      position: relative;
      overflow: visible;
    }
    .ant-card-head-title::after {
      position: absolute;
      content: '';
      width: 3px;
      height: 20px;
      background-color: #002140;
      top: 18px;
      left: -10px;
    }
  }
}
// 按钮
.common-btn {
  background-color: #002140;
  outline: none;
  color: #ffffff;

  &:hover,
  &:focus,
  &:active,
  &.active {
    background-color: #002140;
    outline: none;
    color: #ffffff;
  }
}
.card-title-btn-box {
  position: absolute;
  top: 12px;
  right: 32px;
  .card-title-btn {
    border-radius: 4px;
    margin-left: 10px;
  }
}

// 数据可视化页面card
.ant-card.index-ant-card {
  background: rgb(12, 16, 61);
  border: none;
  margin-bottom: 0;
  & /deep/ .ant-card-head {
    border-bottom: 0 solid #000;
    color: #fff;
    padding: 8px 16px 0;
    .ant-card-head-title::after {
      display: none;
    }
    .ant-card-extra a {
      color: #fff;
    }
    .ant-card-extra .ant-btn {
      padding: 0 8px;
      height: 24px;
    }
  }
  & /deep/ .ant-card-body {
    color: #fff;
    padding: 0 16px;
    p {
      padding: 10px;
      background: rgb(16, 22, 76);
      border-radius: 4px;
      margin-bottom: 8px;
      font-size: 12px;
    }
  }
}

// 数据可视化小组件title
.chart-head {
  display: flex;
  justify-content: space-between;
}

// 数据可视化模态框
.ant-modal.chart-modal {
  .ant-modal-content {
    background: rgb(12, 16, 61);
    .ant-modal-footer {
      display: none;
    }
  }
}

// 数据可视化表格
.chart-table {
  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    background: none;
    color: #fff;
    border-bottom: 1px solid rgb(30, 218, 247);
    padding: 8px;
    background: rgb(19, 26, 84);
  }
  .ant-table-tbody > tr:hover > td {
    background: none;
  }
}

// 数据可视化列表
.chart-list {
  .ant-list-item {
    border-bottom: 0 solid #000;
    color: #fff;
    .ant-list-item-content {
      align-items: center;
      width: 100%;
      display: flex;
      .anticon {
        margin-right: 5px;
      }
      .title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
      }
      .date {
        margin-left: 10px;
      }
    }
  }
}
